import request from '@/axios/index';
import { Button, Space, Table } from 'ant-design-vue';
import { computed, defineComponent, VNode } from 'vue';
import { usePagination } from 'vue-request';
import QueryFilter from '../query-filter';
import './style.css';
import { ColumnType } from './typing';
export default defineComponent({
  props: {
    columns: {
      type: Array<ColumnType>,
    },
    toolbars: {
      type: Array<ColumnType>,
    },
    title: {
      type: String,
    },
    requestUrl: {
      type: String,
    },
    bordered: {
      type: Boolean,
    },
  },
  setup(props) {
    const { columns, toolbars, title, bordered, requestUrl } = props;
    const queryDataRequest = (data?: any) => {
      return request({
        url: requestUrl,
        method: 'post',
        data: data ?? {},
      });
    };
    const { data, current, total, totalPage, pageSize, run, changeCurrent, changePageSize } =
      usePagination(queryDataRequest, {
        pagination: {
          currentKey: 'data.pageNum',
          pageSizeKey: 'data.pageSize',
          totalKey: 'data.total',
        },
      });
    const pagination = computed(() => {
      const result = {
        total: total.value,
        current: current.value,
        pageSize: pageSize.value,
        totalPage: totalPage.value,
        showSizeChanger: true,
        onShowSizeChange: (_current: number, pageSize: number) => {
          changePageSize(pageSize);
        },
      };
      return result;
    });

    const dataSource = computed(() => data.value?.data.list || []);

    const getTableColumns = (): Array<ColumnType> => {
      const _columns: Array<ColumnType> = [];
      const _operationColumns: Array<ColumnType> = [];
      columns?.forEach(eachColumn => {
        if (eachColumn.valueType !== 'operation') {
          if (!eachColumn.width) {
            eachColumn.width = 100;
          }
          if (eachColumn.valueType === 'index') {
            eachColumn.customRender = ({ index }) => {
              return index + 1 + (current.value - 1) * pageSize.value;
            };
          }
          if (!eachColumn.hideInTable) {
            _columns.push(eachColumn);
          }
        } else {
          _operationColumns.push(eachColumn);
        }
      });

      if (_operationColumns.length > 0) {
        const operateColumn: ColumnType = {
          title: '操作',
          valueType: 'operation',
          customRender: (opt: Object) => {
            const vNodes: Array<VNode> = [];
            _operationColumns.forEach(eachOperation => {
              vNodes.push(
                <a
                  class="operate-button-a"
                  onClick={() => {
                    typeof eachOperation.onClick === 'function' ? eachOperation.onClick(opt) : null;
                  }}
                >
                  {eachOperation.title}
                </a>,
              );
            });
            return <Space>{vNodes}</Space>;
          },
        };

        _columns.push(operateColumn);
      }
      return _columns;
    };
    const _tableColumns: Array<ColumnType> = getTableColumns();

    const getToolbars = (): Array<VNode> => {
      const _toolbars: Array<VNode> = [];
      toolbars?.forEach(eachToolbar => {
        _toolbars.push(
          <Button
            type="primary"
            onClick={() =>
              typeof eachToolbar.onClick === 'function' ? eachToolbar.onClick() : () => {}
            }
          >
            {eachToolbar.title}
          </Button>,
        );
      });
      return _toolbars;
    };
    const _tableToolbars = getToolbars();

    const queryData = (params: any): void => {
      run(params);
    };

    const onTableChange = (pagination: any) => {
      changeCurrent(pagination.current);
    };
    return () => {
      return (
        <div class="pro-table">
          <QueryFilter
            class={['pro-table-query-filter', { 'pro-table-border': bordered }]}
            columns={columns}
            onSubmit={queryData}
            onReset={queryData}
          />
          <div class={['pro-table-content', { 'pro-table-border': bordered }]}>
            <div class="pro-table-toolbars-container">
              <div class="pro-table-toolars-title">{title}</div>
              <div class="pro-table-toolars-buttons">
                <Space>{_tableToolbars}</Space>
              </div>
            </div>
            <Table
              columns={_tableColumns}
              pagination={pagination.value}
              dataSource={dataSource.value}
              onChange={onTableChange}
              bordered
            />
          </div>
        </div>
      );
    };
  },
});
